<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
</style>
<template>
  <div class="rj-wrap">
    <div class="rj-topbar rj-cont">
      支付申请列表
      <a href="javascript:history.go(-1);" style="position: absolute; left: 10px; top: 8px">
        <img src="${path}icon/back.png" style="width: 20px" />
      </a>
    </div>
<!--    <div class="weui-cell rj-cont" style="background: #fff;" id="batch">-->
<!--      <div class="weui-cell__hd"><label class="weui-label">采收批次</label></div>-->
<!--      <div class="weui-cell__bd">-->
<!--        <input class="weui-input" name="batch" type="text" placeholder="请选择采收批次" value="" readonly="">-->
<!--      </div>-->
<!--    </div>-->
    <div class="list" id="list">
    </div>
    <div class="weui-loadmore" id="loading" style="display: none;">
      <i class="weui-loading"> </i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <div class="weui-loadmore weui-loadmore_line" id="nomore" style="display: none;">
      <span class="weui-loadmore__tips">没有更多了</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AddBill',
    data() {
      return {

      }
    },
    mounted() {

      //加载页面时执行
      var page = 1;
      var loading = false;  //状态标记
      var batches = [];
      var batchno = '${not empty batchid}' == 'true' ? '${batchid}' : '';
      var ajaxParams = {};
      var currentBtach = '';

      $(document.body).infinite();
      getBatch();

      $(document.body).infinite().on("infinite", function() {
        getdataPage('append');
      });

      //获取批次
      function getBatch() {
        $.ajax({
          url: "${path}harvest/Procurementbatch!findBatckbyplant.action?openid=${openid}",
          type:"POST",
          async: true,
          dataType: 'json',
          data: {},
          error:function(data){
            $.toptip("数据加载失败,请刷新",'error');
            $("#dis").css("display", "none");
          },
          success: function(data){
            var rows = data;
            if(rows.length>0){
              $.each(rows, function(k, v){
                batches.push({
                  title: v.name,
                  value: v.guid
                })
                //已有批次回显
                if (v.guid == batchno) {
                  $('input[name="batch"]').attr('value', v.name);
                  $('input[name="batch"]').attr('data-values', v.guid);
                  getdataPage('reset');
                }
              })
              $('input[name="batch"]').attr('id', 'type');
              //只有一个批次时直接选中
              if (rows.length == 1) {
                $('input[name="batch"]').val(batches[0].title);
                batchno = batches[0].value;
                getdataPage('reset');
              }
            } else {
              $('#batch').hide();
            }
          }
        })
      }
      //切换批次
      $('#batch').on("click", "#type", function(){
        $(this).select({
          title: "选择采收批次",
          items: batches
        });
      });
      //根据批次获取账单
      $('#batch').on("change", "input[name='batch']", function(){
        if ($(this).val() != '' && currentBtach != $(this).val()) {
          currentBtach = $(this).val();
          batchno = $(this).data("values");
          getdataPage('reset');
        }
      });

      //获取数据
      function getdataPage(type) {
        if(loading) return;
        showLoading();

        if(type == 'reset') {
          page = 1;
          $("#list").html('');
          $(document.body).infinite();
        }

        ajaxParams.batchid = batchno;
        ajaxParams.page = page;
        $.ajax({
          url: "${path}harvest/Freightorder!statisticsOrderByPlan.action?openid=${openid}",
          type:"POST",
          async: true,
          dataType: 'json',
          data: ajaxParams,
          error:function(data){
            $.toptip("数据加载失败,请刷新",'error');
            $("#dis").css("display", "none");
          },
          success: function(data){
            var rows = data[0].rows;
            var html = '';
            if(rows.length>0){
              for(var i=0;i<rows.length;i++){
                html += '<div class="weui-form-preview billitem"> <div class="rj-cell max"> <label></label>';
                html += '<span>'+ rows[i].realName +'</span><span>'+ rows[i].telphone +'</span> </div> <div class="rj-cell max"> <label>应付金额:</label> <span>'+ rows[i].unpaidSettlement +' 元</span> </div>';
                html += '<div class="rj-cell max"> <label>应付重量:</label> <span>'+ rows[i].unpaidWeight +' 吨</span> </div> <div class="rj-cell max">';
                html += '<label>应付车数:</label> <span>'+ rows[i].unpaidCount +' 车</span> </div>  ';
                // html += '<div class="rj-cell"><label>已付金额:</label> <span>'+ rows[i]. payMoney +'</span> </div> <div class="rj-cell">';
                // html += '<label>已付重量:</label> <span>'+ rows[i].weight +'</span></div> <div class="rj-cell"><label>已付车数:</label> <span>'+ rows[i].payCarNum +'</span> </div> ';
                html += '<div class="weui-form-preview__ft"><a class="weui-form-preview__btn weui-form-preview__btn_primary" href="${path}harvest/Freightorder!pay.action?openid=${openid}&plantorid='+ rows[i].plantorid +'&batchid='+rows[i].batchid+'">申请支付</a> </div> </div>';
              }
            } else {

            }
            hideLoading();
            page++;
            if (type == 'append') {
              $("#list").append(html);
            } else if(type == 'reset') {
              $("#list").html(html);
            }
            if(rows.length < 5){
              $('#nomore').show();
              $(document.body).destroyInfinite();
            }
          }
        })
      }
      //showLooadin
      function showLoading()
      {
        loading = true;
        $('#loading').show();
        $('#nomore').hide();
      }
      function hideLoading()
      {
        loading = false;
        $('#loading').hide();
        //$('#nomore').show();
      }

    },
    methods: {

    }
  }
</script>
